ID

Sets the string that identifies the control on an XForm. If not specified, a unique ID is automatically generated.

Class Name

className

Sets or retrieves the class name applied on the control

Title

Sets the title of the chart

Chart Type

Sets the type of chart from among the available chart types. The following options are available to display data in a gauge chart:

• Angular Gauge - Displays a data range on a radial scale that is in the form of a dial or speedometer. This type of chart (also known as speedometer or dial chart ) is used to indicate the actual value against the target value. The target values are plotted on the dial. A small pointer is placed at the target value and an indicator (needle) moves along the radial to point the actual value. This chart is used when you need to measure the gap between the target and the actual values.
• Linear Gauge - Displays data across a linear (horizontal) scale with bars mounting on the scale as per the data range. A small arrowhead is placed at the target value and a large arrowhead points the actual value. This chart is used to present a linear view of the actual value as against the target value.
• Vertical Bullet - Displays data in a single cylindrical column (in the form of a bullet) placed vertically. The data range is plotted along the column and a shaded bar within the column indicates the target value. The actual value is indicated by a small shaded bar that cuts across the vertical bar.
• Horizontal Bullet - Displays data in a single horizontally placed bar (in the form of a bullet). The data range is plotted along the bar and a shaded bar within it indicates the target value. The actual value is indicated by a small shaded bar that vertically cuts across the horizontal bar. This chart is similar to the vertical bullet chart, except for the horizontal direction in which the values are displayed.

  Note:
  In all these charts, colors are used in the background to summarize the satisfactory or dissatisfactory levels that are indicated by the values. The colors can be selected in the Color Ranges property.

Target Value

Sets the target value for the data range

Actual Value

Sets the actual value for the data range

Color Ranges

Sets the color range for the selected data. Click to add an entry and fill the following:

• Name - Name of the single data entity in the entire data series
• Lower Range - The lower range of value for that data entity
• Upper Range - The upper range of value for that data entity
• Color - Acts as a visual differentiator between the various data points in the entire series. Click to select the color.

Dynamic Chart Type

Denotes whether the option to change the chart type (dynamically) is shown or hidden at runtime. The chart options display in a drop-down list at runtime.

Show Legend

Display the legends used in the chart

XML

Provide the XML structure that defines the properties of the chart. The syntax of the XML structure is as below.

<xml id="\[id\]">
   <root>
        <\[propertyname\]>\[value\]</\[propertyname\]>
        ...
        <\[propertyname\]>\[value\]</\[propertyname\]>
   </root>
</xml>

You can use the XML to set properties of the chart. The properties are set on the <chart> element in the XML of the Fusion Chart.
Example
A sample XML for changing the size of a Gauge chart is as below:

<xml id="myGaugeProperties">
    <chartProperties>
        <baseFontColor>FF00FF</baseFontColor>
        <editMode>1</editMode>
        <gaugeInnerRadius>110</gaugeInnerRadius>
        <gaugeOuterRadius>130</gaugeOuterRadius>
        <pivotRadius>30</pivotRadius>
        <pivotFillColor>00FFFF</pivotFillColor>
        <logoURL>http://www.contactcenterworld.com/images/company/CORDYS--medium-logo.jpg</logoURL>
        <logoPosition>TR</logoPosition>
    </chartProperties>
</xml>

Data Click

This event (ondataclick) is activated when you click a data plot. You can define the event logic on the Script tab of the XForm.

addListener()

Registers the control to receive notifications for an event

setDataColor(dataColor)

Sets the color for each range in a chart. The colors are applied to consecutive ranges in the order defined in this method. For example, as depicted in the below example, the first range will display the first color (OOFFFF), the second range will display the second color (FFOOFF), and so on. If the ranges are in excess of the colors defined, the extra ranges will display default colors.
Example

chartObj.setDataColor(["00FFFF", "FF00FF", "FFFF00"]);

setDataColorFromLabel(dataColorObject)

Sets the color for each range in a chart based on the name of the range. Example

chartObj.setDataColorFromLabel({"name1" : "00FFFF" ,"name2" : "FF00FF" ,"name3" : "FFFF00" } );

setActualValue(value, bRefresh)

Sets the actual value for the data range. The second parameter (bRefresh) is to delete the old data. If bRefresh is set to 'true',the old data will be deleted and only the current data will render. If bRefresh is set to 'false', the current data will be appended to the old data and rendered. The default value is 'false'. Use the render() method to retrieve and display changes in the UI.

setTargetValue(value)

Sets the target value for the data range. Use the render() method to retrieve and display changes in the UI. Use the render() method to retrieve and display changes in the UI.

removeListener()

Unregisters the control to cease receiving notifications for its events.

render()

Loads the chart with the latest updated properties. Use this method to ensure that the changes done using any of the 'set' methods are reflected in the UI.

setFocus()

Causes an element to receive focus

getChartObject()

Returns the fusion chart object

setProperty(xPath, propertyName, value, nameSpaceURI)

Sets the property value. This method enables greater control on the chart. Refer to the Fusion Widget documentation for various properties and the corresponding values. *

• XPath: Required. XPath for the element in the chart object XML. Use "." as the XPath to set the properties on the root element.
• propertyName: Required. Name of the property to be set.
• value: Required.
• nameSpaceURI: Required if there is a namespace on the chart XML.
  Use the render() method to retrieve and display changes in the UI.

setRangeXml(XmlDocument)

Sets the range XML. Use the render() method to retrieve and display changes in the UI.

getRangeXml()

Returns the range XML.